<template>
  <view class="container">
    <view class="main">
      <view class="tomato-box">
        <upload-image
          :example="example"
          class="upload-image"
          :image-url.sync="form.background"
          @upload="upload"
          :loading.sync="loading"
        />
        <view class="tomato">
          <image src="/static/tomato.png" style="width: 48rpx;height: 100%; margin-right: 10rpx;" />
          <span>8</span>
        </view>
      </view>
      <ty-textarea placeholder="随便说说呗！" class="textarea" @input="input" />
      <button type="primary" @click="handlerSubmitClick" class="button">
        提交
      </button>
      <button type="primary" @click="handlerSkipClick" class="button">
        跳过
      </button>
    </view>
  </view>
</template>

<script>
import UploadImage from "../../../components/UploadImage";
import TyTextarea from "../../../components/Textarea";
import { submitDynamic } from '../../../api/circle';
export default {
  name: "summary",
  onLoad(query) {
    this.awardId = query.awardId;
  },
  data() {
    return {
      awardId: '',
      example: [
        {
          imageUrl: "https://w.wallhaven.cc/full/28/wallhaven-281d5y.png",
          color: "yellow",
        },
        {
          imageUrl: "/static/logo.png",
          color: "green",
        },
      ],
      form: {
        background: "",
        article: "",
      },
      loading: false,
    };
  },
  methods: {
    upload() {
      this.form.background = "/static/logo1.png";
    },
    input(val) {
      this.form.article = val;
    },
    async handlerSubmitClick() {
      console.log(this.awardId, this.form.article, this.form.background);
      await submitDynamic(this.awardId, this.form.article, this.form.background);
      wx.redirectTo({
        url: '/pages/tab/index'
      })
    },
    handlerSkipClick() {
      wx.redirectTo({
        url: '/pages/tab/index'
      })
    }
  },
  components: {
    UploadImage,
    TyTextarea,
  },
};
</script>

<style scoped>
.button {
  width: 100%;
  margin-top: 32rpx;
}
.textarea {
  width: 100%;
  margin-top: 16rpx;
}
.tomato-box {
  width: 100%;
  position: relative;
  margin-top: 64rpx;

}
.tomato-box > .tomato {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 48rpx;
  line-height: 48rpx;
  display: flex;
}
.upload-image {
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
}
.container > .main {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>